<template>
  <div>
    <div>
      <i-row type="flex" justify="end" align="top" class="code-row-bg">
        <ICol span="2">
          <router-link :to="{ name: 'articles-create' }">
            <Button long type="success" size="large">
              创建 <i class="el-icon-plus"></i>
            </Button>
          </router-link>
        </ICol>
      </i-row>
    </div>
    <el-table
      v-loading="isLoading"
      :data="arts"
      style="width: 100%"
      stripe
      border
      @row-click="onClickRow"
    >
      <el-table-column label="#" width="100" prop="id" align="center">
      </el-table-column>
      <el-table-column label="标题" prop="title"> </el-table-column>
      <el-table-column label="作者" width="120" prop="author" align="center">
      </el-table-column>
      <el-table-column label="日期" width="180" align="center">
        <template slot-scope="scope">
          <span style="color: red">{{ scope.row.publish_time }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="是否发布"
        width="80"
        prop="is_publish"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.is_publish === 0 ? "否" : "是" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click.stop="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click.stop="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// import axios from 'axios'
import { mapState } from "vuex";

export default {
  name: "ArticlesIndex",
  computed: {
    ...mapState("artsModule", ["arts"])
  },
  data() {
    return {
      isLoading: false
    };
  },
  async created() {
    try {
      this.isLoading = true;
      await this.$store.dispatch("artsModule/getArts");
      await this.$store.dispatch("artsModule/getTodo");
    } catch (e) {
      this.$message.error("网络错误");
    } finally {
      this.isLoading = false;
    }
    /*axios({
      url: 'http://localhost:3000/articles'
    }).then(res => {
      this.tableData = res.data
    })*/
  },
  methods: {
    onClickRow(row) {
      // console.log(row, column, event)
      console.log(row.id);
    },
    handleEdit(row) {
      console.log(row);
      // console.log(row.id);
      /*this.$router.push({
        name: 'articles-show',
        params: {
          id: row.id
        }
      })*/
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
};
</script>

<style scoped></style>
